<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
  <title>悬浮按钮示例</title>
  <style>
    /* 毛玻璃效果 */
    .blur-bg {
      background-image: url("https://picsum.photos/800/600");
      filter: blur(3px);
      -webkit-filter: blur(3px);
      background-size: cover;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }

    /* 悬浮按钮样式 */
    .floating-button {
      position: fixed;
      top: 20px;
      right: 20px;
      background: rgba(255, 255, 255, 0.7);
      border: none;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-size: 20px;
      cursor: pointer;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .floating-button:hover {
      background: rgba(255, 255, 255, 0.9);
      transform: scale(1.1);
    }

    /* iFrame 标签样式 */
    #my-iframe {
      display: block;
      width: 100%;
      height: 97vh;
      border: none;
    }
  </style>
</head>
<body>
  <div class="blur-bg"></div>

  <!-- 香港节点按钮 -->
  <button class="floating-button" onclick="loadHongKong()">香</button>

  <!-- 新加坡节点按钮 -->
  <button class="floating-button" style="top: 90px;" onclick="loadSingapore()">新</button>

  <!-- iFrame 容器 -->
  <iframe id="my-iframe" src="https://xtrlh.aichatos.com/#/chat/1681912501510"></iframe>

  <script>
    function loadHongKong() {
      // 加载香港节点链接
      document.getElementById('my-iframe').src = 'https://xtrlh.aichatos.com/#/chat/1681912501510';
    }

    function loadSingapore() {
      // 加载新加坡节点链接
      document.getElementById('my-iframe').src = 'https://6xnb4.aichatos.com/#/chat/1681912575343';
    }
  </script>
</body>
</html>